<template>
  <div class="theme-switcher">
    <el-dropdown @command="handleThemeChange">
      <el-button type="primary">
        切换主题<i class="el-icon-arrow-down el-icon--right"></i>
      </el-button>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item
              v-for="theme in themeStore.themes"
              :key="theme.name"
              :command="theme.name"
              :class="{ active: themeStore.currentTheme === theme.name }"
          >
            {{ theme.label }}
          </el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<script setup>
import { onMounted } from 'vue'
import { useThemeStore } from '@/store/theme'

const themeStore = useThemeStore()

const handleThemeChange = (themeName) => {
  console.log(themeName)
  themeStore.setTheme(themeName)
}

onMounted(() => {
  themeStore.initTheme()
})
</script>

<style scoped>
.theme-switcher {
  margin: 20px;
}

.active {
  color: var(--text-color);
  font-weight: bold;
}
</style>
